<template>
<div class="nooder">
    <!-- 没有商品 -->
    <div class="no-order">
        <div class="order-img">
            <img src="@/assets/shopCars/img/order.jpg">
        </div>
        <p>您还没有相关的订单</p>
        <p class="p-size">可以去看看有哪些想买的</p>
        <p class="p-btn" @click="goshop">随便逛逛</p>
    </div>
    <!-- 其他的内容,系统推荐 -->
    <div class="other">
        <p>你可能还喜欢</p>
        <ul>
            <li v-for="(item, index) in shopitems"
                :key="index"
                @click="getShop(item.id)"
            >
                <img :src="item.img_url">
                <span>{{item.title}}</span>
                <p>￥ {{item.new_price}}</p>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            shopitems: []
        }
    },
    methods:{
       getShop(id) {
                this.$router.push('/shop/' + id)
        },
        goshop(){
            this.$router.push('/shopCar')
        }
    },
     mounted(){
        this.$http.get('/api/index')
            .then(({data}) => {
                this.shopitems = data.data;
        })
    }
}

</script>

<style lang="scss" scoped>
.no-order{
    .order-img{
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 200px auto 0 auto;
    img{
        width: 100px;
    }
}
    p{
        font-size: 25px;
        text-align: center;
        font-weight: 500;
        padding-top: 10px;
    }
    .p-size{
        font-size: 16px;
        font-weight: 100;
    }
    .p-btn{
        background-color: orangered;
        color: white;
        border-radius: 100px;
        font-size: 16px;
        width: 120px;
        padding: 10px;
        margin: 50px auto;
    }
}
.other{
    background-color: rgb(240, 234, 234);
    &>p{
        line-height: 60px;
        color: orangered;
        font-size: 20px;
        text-align: center;
        font-weight: 500;
    }
    ul{
        width: 100%;
        li{
            width: 47%;
            display: inline-block;
            background-color: white;
            img{
                width: 100%;
                height: 400px;
            }
            span{
                white-space:pre-wrap;
                word-wrap : break-word ;
            }
            p{
                color: orangered;
            }
        }
        li:nth-child(2n+1){
            margin: 0 1% 15px 2%
        }
        li:nth-child(2n){
            margin: 0 2% 15px 1%
        }
    }
}
</style>